<template>
  <div class="livelistroom-container">
    <div
      class="liveroom-iitem"
      v-for="(item,index) in liveList"
      :key="index"
      @click="handleLook(item.url)"
    >
      <img class="room-cover" :src="item.cover" />
      <div class="title-box">
        <span class="left">{{item.title}}</span>
        <span class="right">{{item.name}}</span>
      </div>
      <div class="footer">
        <span class="hot">{{item.hot}}</span>
      </div>
    </div>
  </div>
</template>


<script>
import {liveList} from '@/libs/liveList.js'
export default {
  data() {
    return {
      url: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
      liveList
    };
  },

  methods: {
    handleLook(link) {
      if (process.env.NODE_ENV == "development") {
        var url ="http://" + window.location.host + "/#/liveroom?liveurl=" + link;
      } else {
        var url =  "http://" +  window.location.host + "/bdmin/#/liveroom??liveurl=" + link;
      }
      window.open(url);
    }
  }
};
</script>


<style lang="scss" scoped>
.livelistroom-container {
  padding: 50px 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .liveroom-iitem {
    width: 19%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    background: #ffffff;
    margin: 12.5px 0.5%;
    cursor: pointer;
    .room-cover {
      width: 100%;
      height: 200px;
    }
    .title-box {
      padding: 5px;
      position: relative;
      .right {
        position: absolute;
        right: 10px;
      }
    }
    .footer {
      font-size: 12px;
      padding: 2px 5px;
      position: relative;
      .hot {
        position: absolute;
        right: 10px;
        color: #666;
        font-weight: bold;
      }
    }
  }
}
</style>
